<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/x-icon" th:href="${application.iconPath}" />
    <title>index</title>
    <div th:include="../templates/aaacommon/basic::html_header"></div>

</head>
<body>
<div class="layui-form" style="margin: 200px 200px;">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-inline">
                <input type="text" name="db_url" lay-verify="required" style="width: 600px;" placeholder="请输入链接" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="db_name" lay-verify="required" placeholder="请输入用户名" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="db_pwd" lay-verify="required" placeholder="请输入密码" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px;">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save" style="float: left">登录</button>
            <div style="width: 150px; float: left;margin-left: 20px;">
                <select lay-verify="" lay-filter="select_db" id="select_db">
                    <option value="">-请上传json-</option>
                </select>
            </div>
        </div>

    </form>
    <div class="layui-form-item">
        <label class="layui-form-label">数据源</label>
        <div class="layui-input-block">
            <input type="button" value="保存json 到 cookie" class="layui-btn layui-btn-primary" id="jsonfile"/>
            &nbsp;&nbsp;
            <a th:href="@{/user/downloadDbTem}">下载数据源模板</a>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['element', 'form', 'layer', 'upload', 'web'], function () {
        var element = layui.element;
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        var web = layui.web;
        //…

        var dbarr;

        upload.render({
            elem: '#jsonfile'
            , url: basePath + '/user/jsonfile'
            , accept: 'file'
            , ext: 'json|txt'
            , done: function (res, index, upload) {
                loadDb(res.result);
            }
        });

        $(".layui-input")[0].focus();

        //加载数据源数据
        function loadDb(jsonarr) {
            if (jsonarr.length > 0) {
                dbarr = jsonarr;
                var all = "<option value='0'>--select--</option>";
                for (var i = 0; i < jsonarr.length; i++) {
                    all += '<option value="' + jsonarr[i].name + '">' + jsonarr[i].name + '</option>';
                }
                $("#select_db").html(all);
                form.render('select');
                dbarr = jsonarr;
            }
        }

        $.post(basePath + "/user/getjosn", function (json) {
            loadDb(json.result);
        });
        form.on('select(select_db)', function (data) {
            if (data.value == 0) {
                $("#db_url").val('');
                $("#db_name").val('');
                $("#db_pwd").val('');
                form.render();
            } else {
                var json;
                for (var i = 0; i < dbarr.length; i++) {
                    if (dbarr[i].name == data.value) {
                        json = dbarr[i].value;
                        $("input[name='db_url']").val(json.url);
                        $("input[name='db_name']").val(json.name);
                        $("input[name='db_pwd']").val(json.pwd);
                        form.render();
                    }
                }
            }

        });
        form.on('submit(save)', function (data) {
            var url = basePath + "/db/conn";
            var edit_data = data.field;
//            console.log(data.field);
            web.load();
            web.ajax(url, 'post', edit_data, function (data) {
                location.href = basePath + "/page/select";
            });

            return false;
        });

    });
</script>
</body>
</html>